import { Badge, Input, InputNumber, message, Popconfirm, Space, TableColumnsType, Tag, Tooltip, Typography } from 'antd'
import type { BoxLabelVO, ITableData } from './types'
import { NavigateFunction } from 'react-router-dom'
import React from 'react'
import { BOXMARK_STATUS_TEXT, BOXMARK_TYPE_TEXT } from '@/constant/purchase'
import { BadgeColorMapSpec } from '@/constant'
import {
  CheckOutlined,
  CloseOutlined,
  EditOutlined,
  FileSearchOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons'
import { PurchaseProduceScheduleVO } from '@/pages/Purchase/Order/types'
import { getDateIsLate } from '@/utils/util'
export const useBoxMarkColumns = ({
  tableData,
  settableData,
  navigate,
  onSave,
  reloadPgae,
  onView,
  onViewArrived,
}: {
  navigate: NavigateFunction
  tableData: ITableData[]
  settableData: React.Dispatch<React.SetStateAction<ITableData[]>>
  onSave: (tableData: ITableData) => void
  reloadPgae: () => void
  onView: (tableData: ITableData) => void
  onViewArrived: (tableData: ITableData) => void
}): TableColumnsType<BoxLabelVO> => [
  {
    title: (
      <div>
        <div>数据</div>
        <div>层级</div>
      </div>
    ),
    dataIndex: 'boxLabelCode',
    key: 'boxLabelCode',
    align: 'center',
    fixed: 'left',
    width: 46,
    render: (_, rows) => {
      return rows.commoditySkus && rows.commoditySkus.length > 0 ? '色' : '尺码'
    },
  },
  {
    title: '采购订单号',
    dataIndex: 'purchaseOrderCode',
    key: 'purchaseOrderCode',
    align: 'center',
    fixed: 'left',
    width: 180,
    render: (info, rows) => {
      return (
        <Typography.Link onClick={() => navigate('/purchase/order/detail?id=' + rows?.purchaseOrderId)}>
          {info + '(' + rows.purchaseOrderStatusName + ')'}
        </Typography.Link>
      )
    },
  },
  {
    title: '大类',
    dataIndex: 'firstClassConfigName',
    key: 'firstClassConfigName',
    align: 'center',
    width: 80,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: (
      <div>
        <div>供应链</div>
        <div>跟单</div>
      </div>
    ),
    dataIndex: 'trackOrderPerson',
    key: 'trackOrderPerson',
    align: 'center',
    width: 80,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '供应商',
    dataIndex: 'supplierName',
    key: 'supplierName',
    align: 'center',
    width: 180,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="top" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '正式订单时间',
    dataIndex: 'officialOrderTime',
    key: 'officialOrderTime',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '要求到货日期',
    dataIndex: 'requiredArrivalTime',
    key: 'requiredArrivalTime',
    align: 'center',
    width: 150,
    render: (info, rows) => {
      return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, flexWrap: 'wrap' }}>
          <div>{info || '-'}</div>
          {rows?.arrivalTimeTips ? <div style={{ color: 'red' }}>({rows?.arrivalTimeTips})</div> : ''}
        </div>
      )
    },
  },
  {
    title: '供应链交期',
    dataIndex: 'deliveryTime',
    key: 'deliveryTime',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '最早到货时间',
    dataIndex: 'firstArrivalTime',
    key: 'firstArrivalTime',
    align: 'center',
    width: 140,
    render: (info, rows) => {
      return (
        <div
          style={{ color: info ? 'var(--primary-color)' : '', cursor: info ? 'pointer' : '' }}
          onClick={() => {
            if (info) {
              onViewArrived(rows)
            }
          }}
        >
          <span>{info || '-'}</span>
          {info && <FileSearchOutlined style={{ marginLeft: 3, color: 'var(--primary-color)' }} />}
        </div>
      )
    },
  },
  {
    title: '助记码',
    dataIndex: 'memoryCode',
    key: 'memoryCode',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '工厂款号',
    dataIndex: 'factorySpuCode',
    key: 'factorySpuCode',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '款式编码/条码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    width: 140,
    render: (_, rows) => {
      return rows.commoditySkus && rows.commoditySkus.length > 0 ? (
        <Typography.Link
          ellipsis
          onClick={() => {
            navigate('/goods/manage/detail?spuId=' + rows?.spuId)
          }}
          style={{ paddingLeft: 12, paddingRight: 12 }}
        >
          {rows?.spuCode}
        </Typography.Link>
      ) : (
        rows?.skuCode
      )
    },
  },
  {
    title: '生产时间跟踪',
    dataIndex: 'commoditySkus',
    key: 'commoditySkus',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return rows.commoditySkus && rows.commoditySkus.length > 0 ? (
        <Space size={'large'}>
          <Typography.Link onClick={() => onView(rows)}>查看</Typography.Link>
        </Space>
      ) : (
        '-'
      )
    },
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
    key: 'productName',
    align: 'center',
    width: 200,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="top" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: (
      <div>
        <div>采购</div>
        <div>方式</div>
      </div>
    ),
    dataIndex: 'purchaseType',
    key: 'purchaseType',
    align: 'center',
    width: 60,
    render: (info) => {
      return info == 0 ? '集采' : info == 1 ? '现采' : '-'
    },
  },
  {
    title: (
      <div>
        <div>订单</div>
        <div>类型</div>
      </div>
    ),
    dataIndex: 'orderType',
    key: 'orderType',
    align: 'center',
    width: 60,
    render: (info) => {
      return info == 0 ? '首单' : info == 1 ? '返单' : '-'
    },
  },
  {
    title: (
      <div>
        <div>颜色</div>
        <div>（SKC）</div>
      </div>
    ),
    dataIndex: 'colorDetailName',
    key: 'colorDetailName',
    align: 'center',
    width: 60,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="top" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: (
      <div>
        <div>尺码</div>
        <div>（SKU）</div>
      </div>
    ),
    dataIndex: 'commoditySize',
    key: 'commoditySize',
    align: 'center',
    width: 60,
    render: (info, rows) => {
      return rows.commoditySkus && rows.commoditySkus.length > 0 ? rows.commoditySkus.length : info || '-'
    },
  },
  {
    title: (
      <div>
        <div>下单</div>
        <div>数量</div>
      </div>
    ),
    dataIndex: 'orderQty',
    key: 'orderQty',
    align: 'center',
    width: 60,
    render: (info) => {
      return info || 0
    },
  },
  {
    title: (
      <div>
        <div>累计</div>
        <div>成品数</div>
      </div>
    ),
    dataIndex: 'totalProductQty',
    key: 'totalProductQty',
    align: 'center',
    width: 60,
    render: (info) => {
      return info || 0
    },
  },
  {
    title: (
      <div>
        <div>已预约</div>
        <div>发货数量</div>
      </div>
    ),
    dataIndex: 'scheduledQty',
    key: 'scheduledQty',
    align: 'center',
    width: 80,
    render: (info) => {
      return info || 0
    },
  },
  {
    title: (
      <div>
        <div>已预约</div>
        <div>比例</div>
      </div>
    ),
    dataIndex: 'scheduledPercent',
    key: 'scheduledPercent',
    align: 'center',
    width: 60,
    render: (info) => {
      return info >= 0 ? Number(info) + '%' : '-'
    },
  },
  {
    title: (
      <div>
        <div>在途</div>
        <div>数量</div>
      </div>
    ),
    dataIndex: 'onTheWayQty',
    key: 'onTheWayQty',
    align: 'center',
    width: 60,
    render: (info) => {
      return info || 0
    },
  },
  {
    title: (
      <div>
        <div>到货</div>
        <div>数量</div>
      </div>
    ),
    dataIndex: 'deliveryQty',
    key: 'deliveryQty',
    align: 'center',
    width: 60,
    render: (info) => {
      return info || 0
    },
  },
  {
    title: (
      <div>
        <div>到货</div>
        <div>率</div>
      </div>
    ),
    dataIndex: 'deliveryPercent',
    key: 'deliveryPercent',
    align: 'center',
    width: 60,
    render: (info) => {
      return info >= 0 ? Number(info) + '%' : '-'
    },
  },
]

export const useTimeColumn = (): TableColumnsType<PurchaseProduceScheduleVO> => [
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    fixed: 'left',
    width: 150,
    render: (info, rows) => {
      return info ? info : '-'
    },
  },
  {
    title: '颜色',
    dataIndex: 'colorDetailName',
    key: 'colorDetailName',
    align: 'center',
    fixed: 'left',
    width: 150,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '计划面料到厂时间',
    dataIndex: 'fabricPlanTime',
    key: 'fabricPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return (
        <span style={{ color: getDateIsLate(rows?.fabricPlanTime, rows?.fabricRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际面料到厂时间',
    dataIndex: 'fabricRealTime',
    key: 'fabricRealTime',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '计划产前样时间',
    dataIndex: 'sampleClothingPlanTime',
    key: 'sampleClothingPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return (
        <span style={{ color: getDateIsLate(rows?.sampleClothingPlanTime, rows?.sampleClothingRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际产前样时间',
    dataIndex: 'sampleClothingRealTime',
    key: 'sampleClothingRealTime',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '计划成品送检时间',
    dataIndex: 'productInspectPlanTime',
    key: 'productInspectPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return (
        <span style={{ color: getDateIsLate(rows?.productInspectPlanTime, rows?.productInspectRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际成品送检时间',
    dataIndex: 'productInspectRealTime',
    key: 'productInspectRealTime',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '计划产前会时间',
    dataIndex: 'preMeetingPlanTime',
    key: 'preMeetingPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return (
        <span style={{ color: getDateIsLate(rows?.preMeetingPlanTime, rows?.preMeetingRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际产前会时间',
    dataIndex: 'preMeetingRealTime',
    key: 'preMeetingRealTime',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '计划上线生产时间',
    dataIndex: 'publishPlanTime',
    key: 'publishPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return (
        <span style={{ color: getDateIsLate(rows?.publishPlanTime, rows?.publishRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际上线生产时间',
    dataIndex: 'publishRealTime',
    key: 'publishRealTime',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '计划初期查货时间',
    dataIndex: 'earlyInspectPlanTime',
    key: 'earlyInspectPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return (
        <span style={{ color: getDateIsLate(rows?.earlyInspectPlanTime, rows?.earlyInspectRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际初期查货时间',
    dataIndex: 'earlyInspectRealTime',
    key: 'earlyInspectRealTime',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '计划中期查货时间',
    dataIndex: 'middleInspectPlanTime',
    key: 'middleInspectPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return (
        <span style={{ color: getDateIsLate(rows?.middleInspectPlanTime, rows?.middleInspectRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际中期查货时间',
    dataIndex: 'middleInspectRealTime',
    key: 'middleInspectRealTime',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '计划下线时间',
    dataIndex: 'offlinePlanTime',
    key: 'offlinePlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return (
        <span style={{ color: getDateIsLate(rows?.offlinePlanTime, rows?.offlineRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际下线时间',
    dataIndex: 'offlineRealTime',
    key: 'offlineRealTime',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '计划尾查时间',
    dataIndex: 'laterPlanTime',
    key: 'laterPlanTime',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return (
        <span style={{ color: getDateIsLate(rows?.laterPlanTime, rows?.laterRealTime) ? 'red' : '' }}>
          {info || '-'}
        </span>
      )
    },
  },
  {
    title: '实际尾查时间',
    dataIndex: 'laterRealTime',
    key: 'laterRealTime',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
]
